This FX takes advantage of Microsoft Internet Explorer 4.0 Dynamic HTML and will not work in any other browser at the time this was written.

This Dynamic HTML example inserts nested list items, which may be collapsed and expanded by clicking on the parent list item.

This FX allows collapseable list items to be either shown or hidden when the document is initially displayed in a browser.

When the document is first loaded, or whenever the document is reloaded or refreshed, the Default: Hidden lists will show the parent items, which may then be clicked to expand and display the hidden nested lists. The Default: Shown lists will be shown, and may be collapsed.

The clickable items will appear as bold text. When the mouse moves over the bold text, the mouse cursor will change to a hand pointer, indicating that the list item may be clicked on. When the bold text is clicked, it will result in the hidden nested list being shown, or a shown nested list being hidden, like a collapseable tree.

This effect relies on SPAN and DIV tags that are not visible in WYSIWYG view, so it is recommended that you use this FX function in Tags On view.

Directions

First, you must drag and drop the above link (Collapse / Expand Script8) onto your document to place the necessary JavaScript in your document.

Next, create an empty list, or new empty list item in your document; you may use either a numbered list or a bulleted list.

Now, before you enter any content into the list item, you must drag and drop one of the FX links 8 from the table, choosing whether or not you want the content to be shown or hidden when the document is loaded.

After the markup is inserted in your document, you simply edit the text as directed.

If you desire further collapseable nested lists, drag another Nested List FX 8 into an empty list item.